<template>
    <el-table :data="tableData" border>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="nodeName" label="节点名称" width="160" />
        <el-table-column prop="handlerName" label="审批人" width="140" />
        <el-table-column prop="operation" label="操作" width="120" :formatter="operationFmt" />
        <el-table-column prop="opinion" label="处理意见" show-overflow-tooltip />
        <el-table-column prop="createTime" label="审批时间" width="180" :formatter="formatUtil.gridDatetimeFormat" />
    </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'

const tableData = ref([])

const props = defineProps({
    taskId: {
        type: String,
        default: ''
    }
})

const operationFmt = (row, column) => {
    let data = row[column.property]
    if (data === 'submit') {
        return '提交'
    } else if (data === 'initiated') {
        return '发起'
    } else if (data === 'agree') {
        return '同意'
    } else if (data === 'reject') {
        return '驳回'
    } else if (data === 'revoke') {
        return '撤回'
    } else {
        return '未知操作'
    }
}

const loadData = () => {
    http.fetchForm({
        url: '/flow/task/loadFlowHistory',
        data: {
            taskId: props.taskId
        }
    }).then((res) => {
        tableData.value = res.data
    })
}

onMounted(() => {
    if (props.taskId !== '') {
        loadData()
    }
})
</script>
<style scoped></style>
